/*
 * ! Ext JS Library 3.1.1 Copyright(c) 2006-2010 Ext JS, LLC licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.ns('Ext.ux.form');

/**
 * @class Ext.ux.form.FileUploadField
 * @extends Ext.form.TextField Creates a file upload field.
 * @xtype fileuploadfield
 */
Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
      /**
       * @cfg {String} buttonText The button text to display on the upload
       *      button (defaults to 'Browse...'). Note that if you supply a value
       *      for {@link #buttonCfg}, the buttonCfg.text value will be used
       *      instead if available.
       */
      buttonText : 'Browse...',
      /**
       * @cfg {Boolean} buttonOnly True to display the file upload field as a
       *      button with no visible text field (defaults to false). If true,
       *      all inherited TextField members will still be available.
       */
      buttonOnly : false,
      /**
       * @cfg {Number} buttonOffset The number of pixels of space reserved
       *      between the button and the text field (defaults to 3). Note that
       *      this only applies if {@link #buttonOnly} = false.
       */
      buttonOffset : 3,
      /**
       * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
       */

      // private
      readOnly : true,

      /**
       * @hide
       * @method autoSize
       */
      autoSize : Ext.emptyFn,

      // private
      initComponent : function() {
        Ext.ux.form.FileUploadField.superclass.initComponent.call(this);

        this.addEvents(
            /**
             * @event fileselected Fires when the underlying file input field's
             *        value has changed from the user selecting a new file from
             *        the system file selection dialog.
             * @param {Ext.ux.form.FileUploadField}
             *          this
             * @param {String}
             *          value The file value returned by the underlying file
             *          input field
             */
            'fileselected');
      },

      // private
      onRender : function(ct, position) {
        Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);

        this.wrap = this.el.wrap({
              cls : 'x-form-field-wrap x-form-file-wrap'
            });
        this.el.addClass('x-form-file-text');
        this.el.dom.removeAttribute('name');
        this.createFileInput();

        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
              text : this.buttonText
            });
        this.button = new Ext.Button(Ext.apply(btnCfg, {
              renderTo : this.wrap,
              cls : 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
            }));

        if (this.buttonOnly) {
          this.el.hide();
          this.wrap.setWidth(this.button.getEl().getWidth());
        }

        this.bindListeners();
        this.resizeEl = this.positionEl = this.wrap;
      },

      bindListeners : function() {
        this.fileInput.on({
              scope : this,
              mouseenter : function() {
                this.button.addClass(['x-btn-over', 'x-btn-focus'])
              },
              mouseleave : function() {
                this.button.removeClass(['x-btn-over', 'x-btn-focus', 'x-btn-click'])
              },
              mousedown : function() {
                this.button.addClass('x-btn-click')
              },
              mouseup : function() {
                this.button.removeClass(['x-btn-over', 'x-btn-focus', 'x-btn-click'])
              },
              change : function() {
                var v = this.fileInput.dom.value;
                this.setValue(v);
                this.fireEvent('fileselected', this, v);
              }
            });
      },

      createFileInput : function() {
        this.fileInput = this.wrap.createChild({
              id : this.getFileInputId(),
              name : this.name || this.getId(),
              cls : 'x-form-file',
              tag : 'input',
              type : 'file',
              size : 1
            });
      },

      reset : function() {
        this.fileInput.remove();
        this.createFileInput();
        this.bindListeners();
        Ext.ux.form.FileUploadField.superclass.reset.call(this);
      },

      // private
      getFileInputId : function() {
        return this.id + '-file';
      },

      // private
      onResize : function(w, h) {
        Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);

        this.wrap.setWidth(w);

        if (!this.buttonOnly) {
          var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
          this.el.setWidth(w);
        }
      },

      // private
      onDestroy : function() {
        Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
        Ext.destroy(this.fileInput, this.button, this.wrap);
      },

      onDisable : function() {
        Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
        this.doDisable(true);
      },

      onEnable : function() {
        Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
        this.doDisable(false);

      },

      // private
      doDisable : function(disabled) {
        this.fileInput.dom.disabled = disabled;
        this.button.setDisabled(disabled);
      },

      // private
      preFocus : Ext.emptyFn,

      // private
      alignErrorIcon : function() {
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
      }

    });

Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

// backwards compat
Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
